<template>
  <div class="login">
    <div class="loginheader">
      <span class="iconfont icon-arrow-left-2" @click="back"></span>
      <span class="logintext">登录</span>
    </div>
    <div class="logincontent">
      <div class="card">
        <div class="cardimg">
          <img src="@/assets/taptap.png" alt="taptap" />
        </div>
        <div class="stext">即刻加入狂热游戏爱好者</div>
        <div class="inputarea">
          <div class="username">
            <input
              type="text"
              placeholder="用户名"
              @input="throttle(usernameCheck, 500)"
              v-model="username"
            />
            <div v-if="error_username" class="input_error">
              {{ error_username }}
            </div>
          </div>
          <div class="password">
            <input
              type="password"
              name=""
              id=""
              placeholder="密码"
              @input="throttle(passwordCheck, 500)"
              v-model="password"
            />
            <div v-if="error_password" class="input_error">
              {{ error_password }}
            </div>
          </div>
          <div class="tologin" @click="toregister">还没有账号？点此注册</div>
          <div class="loginbtn" @click="submitLog">登录</div>
          <div class="logres" v-if="logres">{{ logres }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      error_password: "",
      error_username: "",
      logres: "",
    };
  },
  methods: {
    isInputVaild() {
      if (
        !this.error_password &&
        !this.error_username &&
        this.username &&
        this.password
      ) {
        return true;
      }
      if (!this.username) {
        this.error_username = "用户名不能为空";
      }
      if (!this.password) {
        this.error_password = "密码不能为空";
      }

      return false;
    },
    async submitLog() {
      if (this.isInputVaild()) {
        let res = await axios({
          url: "http://120.77.179.176:8081/user/login",
          method: "POST",
          data: {
            username: this.username,
            password: this.password,
          },
        }).then((res) => {
          const r = res.data.code;
          if (r === "200") {
            this.logres = res.data.msg;
            this.finishLog();
          } else {
            this.logres = res.data.msg;
          }
        });
      }
    },
    //节流对输入框进行控制
    throttle(fn, delay) {
      let timer = true;
      return (function () {
        if (!timer) return;
        timer = false;
        setTimeout(function () {
          fn();
          timer = true;
        }, delay);
      })();
    },
    finishLog() {
      localStorage.username = this.username;
      setTimeout(() => {
        this.$router.push("/");
      }, 1000);
    },
    usernameCheck() {
      this.logres = "";
      if (this.username === "") {
        this.error_username = "用户名不能为空";
      } else {
        this.error_username = "";
      }
    },
    passwordCheck() {
      this.logres = "";
      if (this.password === "") {
        this.error_password = "密码不能为空";
      } else {
        this.error_password = "";
      }
    },
    back() {
      this.$router.back();
    },
    toregister() {
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  align-items: center;
  height: 92vh;
  background: white;
  .loginheader {
    position: relative;
    top: 8%;
    padding-left: 0.32rem;
    transform: translateY(-50%);
    .iconfont {
      font-size: 0.32rem;
    }
    .logintext {
      font-size: 0.32rem;
      font-weight: 700;
      margin-left: 0.32rem;
    }
  }
  .logincontent {
    background: white;
    padding-top: 12vh;
    height: 100%;
    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .cardimg img {
        width: 80vw;
      }
      .stext {
        color: $themeColor;
        margin-top: -0.5rem;
      }
      .tologin {
        text-align: center;
        font-size: 0.24rem;
        color: $themeColor;
        margin-top: 0.2rem;
      }
      .inputarea {
        width: 6.4rem;
        box-sizing: border-box;
        padding: 0 0.64rem;
        margin-top: 0.2rem;
        .input_error {
          text-align: left;
          color: red;
          margin-top: 0.2rem;
          font-size: 0.24rem;
        }
        .username {
          margin-right: auto;
          text-align: center;
          & input {
            line-height: 2.5em;
            color: $themeColor;
            width: 100%;
            background: none;
            font-size: 0.32rem;
            border-bottom: 1px #ddd solid;
          }
          & input:focus {
            border-bottom: $themeColor 2px solid;
          }
        }
        .password {
          text-align: center;
          margin-right: auto;
          & input {
            width: 100%;
            color: $themeColor;
            line-height: 2.5em;
            background: none;
            font-size: 0.32rem;
            border-bottom: 1px #ddd solid;
          }
          & input:focus {
            border-bottom: $themeColor 2px solid;
          }
        }
        .tips {
          margin-top: 0.32rem;
          font-size: 0.24rem;
          line-height: 1.5em;
          & input {
            background: $themeColor;
          }
        }
        .loginbtn {
          background: $themeColor;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.32rem;
          height: 0.9rem;
          border-radius: 0.4rem;
          font-size: 0.32rem;
          &:active {
            background: #319da6;
          }
        }
        .logres {
          margin-top: 0.2rem;
          color: $themeColor;
          text-align: center;
          font-size: 0.24rem;
        }
      }
    }
  }
}
</style>